<template>
    <section id="how-it-works" class="section">
        <div class="container">
            <h2 class="section-title">工作原理</h2>
            <p class="section-subtitle">从您的声音到 AI 的回应，AI 小智通过一个清晰、高效的流程完成每一次交互。</p>
            <div class="how-it-works-flow">
                <!-- Step 1 -->
                <div class="flow-step">
                    <div class="step-icon-wrapper border-cyan">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                    </div>
                    <p class="step-title">1. 语音输入</p>
                </div>
                <div class="flow-arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </div>
                <!-- Step 2 -->
                <div class="flow-step">
                    <div class="step-icon-wrapper border-violet">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.464c-1.396-1.396-2-3.3-2-5.464A8 8 0 0 1 12 1a8 8 0 0 1 10 7c0 2.164-.604 4.068-2 5.464"/><path d="M14 21h-4"/><path d="m12 17-2-3h4l-2 3Z"/><path d="M12 14v3"/><path d="M20 15c-1.396 1.396-3.304 2-5.464 2A8 8 0 0 1 6.536 7"/></svg>
                    </div>
                    <p class="step-title">2. API 请求</p>
                </div>
                <div class="flow-arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </div>
                <!-- Step 3 -->
                <div class="flow-step">
                    <div class="step-icon-wrapper border-emerald">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.88.99 6.6 2.6l-2.4 2.4A4 4 0 0 0 12 10v2a2 2 0 0 0 4 0v-1a1 1 0 0 0-1-1H9"/><path d="M7 11.5A4.5 4.5 0 0 0 11.5 7"/></svg>
                    </div>
                    <p class="step-title">3. 语音输出</p>
                </div>
            </div>
        </div>
    </section>
  </template>
  